<template>
  <div class="main">
    <mine-title>我的预测</mine-title>
    <div class="content">
      <div class="block-header">
        <div class="block-header-left">
          <mine-button type="primary" secondary @click="loadData()"><i class="iconfont icon-reset-line"></i>刷新</mine-button>
        </div>
        <div class="block-header-right"></div>
      </div>
      <el-form ref="form" :inline="true" :model="listQuery" class="demo-form-inline">
        <el-row :gutter="2">
          <el-col :xs="12" :sm="8" :md="8" :lg="4">
            <el-form-item prop="id">
              <el-input v-model="listQuery.id" placeholder="任务ID" size="small" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="4">
            <el-form-item prop="taskName">
              <el-input v-model="listQuery.taskName" placeholder="任务名称" size="small" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="4">
            <el-form-item prop="status">
              <el-select v-model="listQuery.status" size="small" placeholder="运行状态" clearable>
                <el-option
                  v-for="(item, index) in statusList"
                  :key="index"
                  :value="item.id"
                  :label="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="4">
            <el-form-item prop="taskName">
              <el-input v-model="listQuery.projectName" placeholder="关联项目" size="small" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="4">
            <el-form-item label="" prop="createTime">
              <el-date-picker v-model="listQuery.createTime" type="date" placeholder="创建时间" size="small" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="8" :md="8" :lg="4">
            <el-form-item label="" prop="endTime">
              <el-date-picker v-model="listQuery.endTime" type="date" placeholder="完成日期" size="small" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        class="table"
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        :max-height="300"
        ref="multipleTable">
        <el-table-column label="任务ID" prop="id" show-overflow-tooltip></el-table-column>
        <el-table-column label="任务名称" prop="taskName" show-overflow-tooltip></el-table-column>
        <el-table-column label="任务状态" prop="status" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ $common.fetchSingleWord({ val: scope.row.status, dict: statusList }) }}
          </template>
        </el-table-column>
        <el-table-column label="关联项目" prop="projectName" show-overflow-tooltip></el-table-column>
        <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ $common.format(scope.row.createTime, 'yyyy-MM-dd', '--') }}
          </template>
        </el-table-column>
        <el-table-column label="完成时间" prop="endTime" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ $common.format(scope.row.endTime, 'yyyy-MM-dd', '--') }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="downloadAnalysis(scope.row)">下载分析结果</el-button>
          </template>
        </el-table-column>
      </el-table>
      <mine-pagination
        @numberChange="numberChange"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage">
      </mine-pagination>
    </div>
  </div>
</template>
<script>
import { mappingMixins } from './mixins.js';
import { omit } from 'lodash';
export default {
  mixins: [mappingMixins],
  data () {
    return {
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      loading: false,
      listQuery: {
        id: '',
        taskName: '',
        status: '',
        // date: ''
        createTime: '',
        endTime: ''
      },
      rules: {

      },
    };
  },
  methods: {
    async loadData (flag) {
      if (flag) {
        this.currentPage = 1;
      }
      const params = {
        ...omit(this.listQuery, ['date']),
        page: this.currentPage,
        pageSize: this.pageSize,
      };
      /*
      const date = this.listQuery.date;
      if (date && date.length) {
        params.createTime = date[0];
        params.endTime = date[1];
      }
      */
      this.loading = true;
      try {
        const res = await this.$store.dispatch('proAdminPredicttaskPredictTaskSearch', params);
        const result = res.data || {};
        if (result.success) {
          const data = result.data;
          this.tableData = data.list && data.list.length ? data.list : [];
          this.total = data.rowCount || 0;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      } catch (e) {
        console.error(e);
      }
      this.loading = false;
    },
    clear () {
      this.$refs.form.resetFields();
      this.loadData(true);
    },
    downloadSource () {

    },
    async downloadAnalysis (val) {
      const params = {
        id: val.id,
      };
      try {
        await this.$store.dispatch('proAdminPredicttaskPredictTaskIdGetResultUrl', params);
      } catch (e) {
        console.error(e);
      }
    },
    numberChange (val) {
      switch (val.flag) {
        case 'pageSize':
          this.pageSize = val.pageSize;
          this.loadData(true);
          break;
        case 'currentPage':
          this.currentPage = val.currentPage;
          this.loadData(false);
          break;
        default:
          break;
      }
    },
  },
  mounted () {
    this.loadData(true)
  }
}
</script>
<style lang="less" scoped>
.demo-form-inline {
  margin-bottom: 22px;
  .el-form-item {
    margin-bottom: 0;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
  }
}
</style>
